
<template>
  <div>
    <el-row>
      <el-col :span="24">
        <van-nav-bar
          title="设置交易密码"
          left-text="返回"
          right-text="完成"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <van-password-input
          :value="value"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
          v-model="value"
          :show="showKeyboard"
          @blur="showKeyboard = false"
        />
        <van-toast id="van-toast" />
      </el-col>
    </el-row>
  </div>
</template>

<script>import { Toast } from "vant";
import axios from "axios";

export default {
  data() {
    return {
      uid: '',
      value: '',
      showKeyboard: true,
      user: {},
    };
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      // 返回上一个页面
      this.$router.go(-1);
    },
    onClickRight() {
      Toast.loading({ message: '保存密码中...', forbidClick: true });
      // 获取value的数据
      Toast(this.value);
      axios.post(`/user/user/setPayPassword?uid=${this.uid}&code=${this.value}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success("设置成功");
          this.$router.push({path: "/zhangHao"});
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
  mounted() {
    var user = localStorage.getItem('user');
    if (user) {
      this.user = JSON.parse(user);
      this.uid = this.user.id;
      console.log("uid=", this.uid);
    }
  },
  watch: {
    value(val) {
      if (val.length === 6) {
        this.showKeyboard = false;
      }
    },
  }
};
</script>

<style scoped></style>
